<template >
    <div class="info-container">
        <!-- 申请用户列表 -->
        <el-table :data="userdata.userlist" stripe style="width: 100%" border
        :header-cell-style="{background:'rgb(178, 147, 147)',color:'rgb(57, 50, 50)'}">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="userName" label="用户名"></el-table-column>
            <el-table-column prop="userPhone" label="电话"></el-table-column>
            <!-- <el-table-column prop="id" label="id"></el-table-column>
            <el-table-column prop="userId" label="userId"></el-table-column> -->
            <el-table-column label="操作" width="250px">
                <template v-slot="scope">
                    <!-- 操作按钮 -->
                    <!-- 分配角色按钮 -->
                    <el-tooltip effect="dark" content="同意" placement="top" :enterable="false">
                        <el-button type="warning"  size="mini" @click="agreeApply(scope.row.id)">
                            同意
                        </el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="拒绝" placement="top" :enterable="false">
                        <el-button size="mini" @click="disagreeApply(scope.row.id)">
                            拒绝
                        </el-button>
                    </el-tooltip>
                    
                </template>
            </el-table-column>
      </el-table>
      <!-- 分页 -->
       <el-pagination
        layout="total, prev, pager, next"
        :total="this.userdata.total"
        @current-change="handleCurrentChange" 
        :current-page="currentPage"
        :page-size="pagesize"
      >
      </el-pagination> 
    </div>
</template>

<script>
    import requests from '@/api/ajax'
    export default {
        name: 'Editormanage',
        data() {
            return{
                userdata: {
                    userlist: [],
                    total: 0
                },
                currentPage: 1, //当前页 刷新后默认显示第一页
                pagesize: 5
            }
        },
        created() {
            this.getUserList()
        },
        methods: {
            getUserList() {
                requests.get('/apply/list',{
                    params: {
                        page: 1,
                        pageSize: 5,
                    }
                }).then(
                    (res) => {
                        // console.log(this.currentPage)
                        // console.log(res.data.records)
                        this.userdata.userlist = res.data.records
                        this.userdata.total = res.data.total
                        
                    }
                )
            },
            handleCurrentChange(currentPage) { // 跳转页面
                this.currentPage = currentPage
                // console.log(this.currentPage)
                requests.get('/apply/list',{
                    params: {
                        page: this.currentPage,
                        pageSize: 5,
                    }
                }).then(
                    (res) => {
                        // console.log(this.currentPage)
                        // console.log(res.data.records)
                        this.userdata.userlist = res.data.records
                        this.userdata.total = res.data.total
                    }
                )
            },
            // agreeApply(id) {
            //     // console.log(id)
            //     requests.put('/apply/' + id).then(
            //         (res) => {
            //             // console.log(res.data)
            //         }
            //     )
            //     this.$message.success("您已同意申请~")
            //     this.$router.go(0)
            // },
            agreeApply(id){
                this.$messagebox.confirm('此操作将升级该用户为编辑, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(
                    () => {
                        requests.put('/apply/' + id)
                        this.$message.success("您已同意申请~")
                        this.$router.go(0)
                    }
                ).catch(
                    () => {
                        this.$message.info('已取消升级')
                    }
                )
            },
            disagreeApply(id) {
                // console.log(id)
                // requests.delete('/apply/' + id).then(
                //     (res) => {
                //         // console.log(res.data)
                //     }
                // )
                // this.$message.success("您已拒绝申请~")
                // this.$router.go(0)
                this.$messagebox.confirm('此操作将拒绝升级该用户为编辑, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(
                    () => {
                        requests.delete('/apply/' + id)
                        this.$message.success("您已拒绝申请~")
                        this.$router.go(0)
                    }
                ).catch(
                    () => {
                        this.$message.info('已取消拒绝')
                    }
                )
            }
        }
    }
</script>

<style lang="less" scoped>
    .info_container{
      height: 600px;
      width: 700px;
      margin-left: 150px;
      margin-top: 50px;
      font-size: larger;
    }
</style>